@mixin cmp {
    margin: 0;
    padding: 0;
}
@mixin bordersetting {
    border: 1px solid transparent;
    border-radius: 8px;
}

$bgcolor: #eee;
$sidespacing: 10px;
$sidewidth: 150px;

$mediaWidth: 760px;

body {
    @include cmp;
    > .container {
        width: auto;
        padding: 10px $sidewidth + $sidespacing;
        margin: 0 auto;
        min-width: 300px;
        min-height: 400px;
        height: 1600px;
        @media (max-width: $mediaWidth) {
            height: auto;
        }
        overflow: hidden;
        // @include bordersetting;
        @media (max-width: $mediaWidth) {
            padding: 10px 10px;
        }
        
        @mixin floatsetting {
            float: left;
            height: 100%;
        }
        > .main {
            @include floatsetting;
            width: 100%;

            > header {
                @include bordersetting;
                background-color: $bgcolor;
                padding: 0 20px 20px 20px;
                @media (max-width: $mediaWidth) {
                    padding-bottom: 0;
                }
                > hgroup > h2 {
                    @media (max-width: $mediaWidth) {
                        display: none;
                    }
                }
                > p {
                    @media (max-width: $mediaWidth) {
                        display: none;
                    }
                }
            }

            $navheight: 45px;
            > nav {
                border-radius: 8px;
                background: linear-gradient(#000, #fff);
                height: $navheight;
                @media (max-width: $mediaWidth) {
                    height: auto;
                    background: linear-gradient(#000, #cdd);
                }
                ul {
                    list-style: none;
                }
                a {
                    text-decoration: none;
                    color: #fff;
                }
                > .menu-button {
                    display: none;
                    @media (max-width: $mediaWidth) {
                        display: block;
                        margin-left: 20px;
                        line-height: $navheight;
                        color: #fff;
                        height: $navheight;
                        &:hover {
                            font-size: 1.1em;
                        }
                    }
                }
                > ul {
                    @include cmp;
                    @media (max-width: $mediaWidth) {
                        display: none;
                    }
                    > li {
                        display: inline-block;
                        margin-right: 20px;
                        @media (max-width: $mediaWidth) {
                            display: block;
                        }
                        &:hover {
                            font-size: 1.1em;
                        }
                        &:nth-child(1) {
                            margin-left: 40px;
                        }
                        &:nth-child(3) {
                            position: relative;
                            > ul {
                                width: 75px;
                                @include cmp;
                                display: none;
                                background: linear-gradient(#000, #ddd);
                                border-radius: 0 0 4px 4px;

                                position: absolute;
                                margin-top: -5px;

                                > li {
                                    padding: 0 10px;
                                    > a {
                                        font-size: 11.5pt;
                                        &:hover {
                                            font-size: 12.5pt;
                                        }
                                    }
                                    &:nth-child(1) {
                                        position: relative;
                                        > ul{
                                            @include cmp;
                                            width: 60px;
                                            position: absolute;
                                            display: none; 
                                            top: 0px;
                                            right: -70px;

                                            padding: 5px;

                                            background: linear-gradient(#000, #ddd);
                                            border-radius: 0 0 4px 4px;
                                            > li {
                                                font-size: 11.5pt;
                                                &:hover {
                                                    font-size: 12.5pt;
                                                }
                                            }
                                        }
                                        &:hover {
                                            > ul {
                                                display: block;
                                            }
                                        }
                                    }
                                }
                            }
                            &:hover {
                                > ul {
                                    display: block;
                                    @media (max-width: $mediaWidth) {
                                        display: none;
                                    }
                                }
                            }
                        }
                        > a {
                            line-height: $navheight;
                        }
                    }
                }
                > ul.expanded {
                    display: block;
                    > li {
                        margin-left: 40px;
                    }
                }
            }
            
            > .product-list {
                margin-top: -5px;
                padding-left: 20px;
                background-color: mix($bgcolor, #ccc);
                border-radius: 8px;
                > h2 {
                    margin-top: 0px;
                    padding: 20px 0 15px 0;
                }

                > .product {
                    display: inline-block;
                    margin-right: 15px;
                    margin-bottom: 15px;
                    width: 180px;
                    height: 220px;
                    text-align: center;

                    border: 1px solid #aaa;

                    > p {
                        @include cmp;

                        margin: 2px 0;
                        font-size: 10pt;
                        font-family:  Arial, Helvetica, sans-serif;
                        &:nth-child(1) {
                            font-size: 13.8pt;
                            font-weight: bold;
                            margin: 5px 0;
                        }
                    }
                    > img {
                        width: 140px;
                        height: 160px;
                    }
                }
            }

            > footer {
                margin-top: 5px;
                background-color: $bgcolor;
                border-radius: 8px;
                > nav {
                    text-align: center;
                    > a {
                        text-decoration: none;
                        margin-right: 60px;
                        line-height: 70px;
                        font-size: 18pt;
                        color: #111;
                        @media (max-width: $mediaWidth) {
                            display: block;
                        }
                    }
                }
            }
        }

        > .left {
            @include floatsetting;
            @include bordersetting;
            width: $sidewidth;
            background-color: mix($bgcolor, #fff);
            margin-left: -100%;
            position: relative;
            left: -($sidewidth + $sidespacing);

            @media(max-width: $mediaWidth) {
                display: none;
            }
        }

        > .right {
            @include floatsetting;  
            border-radius: 8px;                      
            width: $sidewidth;
            background-color: mix($bgcolor, #fff);
            margin-left: -$sidewidth;
            position: relative;
            right: -($sidewidth + $sidespacing);
            
            > .rightf_box {
                position: fixed;
                top: 50%;
            }

            @media(max-width: $mediaWidth) {
                display: none;
            }
        }
    }
}